<template>
    <div style="width: 100%; height: 100%">
        <cgs-echarts ref="cgsEcharts" 
            v-if="config.chartType !== 'numberGraphic' && worksheetData.length > 0"
            :type="config.chartType" 
            :title='config.name'
            :x='Array.isArray(config.xAxis)? config.xAxis: [{field: config.xAxis}]'
            :data='worksheetData'
            :y='config.yAxis'
            :colors='config.colorConfig'
            :limits='config.colorLimit'
        />
        <cgs-number-graphic ref="cgsNumberGraphic" 
            v-if="config.chartType === 'numberGraphic' && worksheetData.length > 0"
            :title="config.name"
            :unit="config.numberStyle.unit"
            :font-size="config.numberStyle.fontSize"
            :font-color="config.numberStyle.fontColor"
            :data="worksheetData"
            :y="config.yAxis"
        />
    </div>
</template>

<script>
import cgsEcharts from "./cgsEcharts.vue"
import cgsNumberGraphic from "./cgsNumberGraphic.vue"
import {getShareFilterDataList} from "@/api/worksheet"
export default {
    props: {config:Object},
    components:{
        cgsEcharts,
        cgsNumberGraphic,
    },
    data(){
        return {
            id: "cgsTest_" + new Date().getTime(),
            numberData: 0,
            numberStyle: {},
            worksheetData: []
        }
    },
    async mounted (){
        const {worksheetId, sortField, filters, isAsc} = this.config
        let filterData = {
            worksheetId,
            sortField,
            filters,
            isAsc,
            format: 1
        }
        let data = await getShareFilterDataList(filterData)
        this.worksheetData = data?.data || []
    },
    watch:{
         async config (newName, oldName) {
            if(this.config.type !== 'chart') return
            
            const {worksheetId, sortField, filters, isAsc} = this.config
            let filterData = {
                worksheetId,
                sortField,
                filters,
                isAsc,
                format: 1
            }
            let data = await getShareFilterDataList(filterData)
            this.worksheetData = data?.data || []
        }
    },
    methods:{
      resize(newHPx, newWPx){
        if (this.config.chartType !== 'numberGraphic' && this.$refs['cgsEcharts']){
            this.$refs['cgsEcharts'].resize(newHPx, newWPx)
        }
      }
    }
}
</script>

<style scoped>
.sceen3d{
    width: 100%;
    height: 100%;
}
</style>